<template>
    <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <li v-for="(item,index) in items" class="treeview">
          <a>
            <i v-bind:class="item.icon"></i> <span>{{item.itemname}}</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul class="treeview-menu">
            <li v-for="(list,index) in item.lists" v-bind:class="{active_li:list.isActive_li}" @click="clickToActive($event,list)" >
                <router-link v-bind:to="list.url"><i class="fa fa-circle-o"></i> {{list.listname}}</router-link>
            </li>
          </ul>
        </li>
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>
</template>
<script>
    export default {
        data() {
            return {
                items: [{
                    icon: 'fa fa-dashboard',
                    itemname: '成本管理',
                    lists: [{
                        listname: '成本查看',
                        url: '/costanalyse',
                        isActive_li: false
                    }, {
                        listname: '材料价格',
                        url: '/materialprice',
                        isActive_li: false
                    }, {
                        listname: '成本月报',
                        url: '/costmonthly',
                        isActive_li: false
                    }, {
                        listname: '汇率查看',
                        url: './huilv',
                        isActive_li: false
                    }],
                    isActive_ul: false
                }, {
                    icon: 'glyphicon glyphicon-th-list',
                    itemname: '基础信息管理',
                    lists: [{
                        listname: '部门管理',
                        url: '/dept',
                        isActive_li: false,
                    }, {
                        listname: '员工管理',
                        url: '/employee',
                        isActive_li: false
                    }, {
                        listname: '物料管理',
                        url: '/material',
                        isActive_li: false
                    }, {
                        listname: '往来单位管理',
                        url: '/cs',
                        isActive_li: false
                    }, {
                        listname: '单位管理',
                        url: '/unit',
                        isActive_li: false
                    }, {
                        listname: '放置地管理',
                        url: '/whlocation',
                        isActive_li: false
                    }]
                }, {
                    icon: 'glyphicon glyphicon-shopping-cart',
                    itemname: '请购管理',
                    lists: [{
                        listname: '请购单管理',
                        url: '/purchase',
                        isActive_li: false
                    }, {
                        listname: '请购单审核',
                        url: '/purchase_review',
                        isActive_li: false
                    }]
                }, {
                    icon: 'glyphicon glyphicon-wrench',
                    itemname: '维保管理',
                    lists: [{
                        listname: '维保申请',
                        url: '/fixapply',
                        isActive_li: false
                    }, {
                        listname: '维保处理',
                        url: '/fixhandle',
                        isActive_li: false
                    }]
                }, {
                    icon: 'glyphicon glyphicon-sort',
                    itemname: '进销存管理',
                    lists: [{
                        listname: '入库',
                        url: '/instock',
                        isActive_li: false
                    }, {
                        listname: '领用',
                        url: '/pickup',
                        isActive_li: false
                    }, {
                        listname: '库存核查',
                        url: '/inventorycheck',
                        isActive_li: false
                    }]

                }, {
                    icon: 'fa fa-rmb',
                    itemname: '固定资产',
                    lists: [{
                        listname: '固定资产管理',
                        url: '/gdzcmanage',
                        isActive_li: false
                    }, {
                        listname: '固定资产报废',
                        url: '/gdzcdiscard',
                        isActive_li: false
                    }]
                }, {
                    icon: 'glyphicon glyphicon-exclamation-sign',
                    itemname: '权限管理',
                    lists: [{
                        listname: '功能列表',
                        url: '/function',
                        isActive_li: false
                    }, {
                        listname: '授权管理',
                        url: '/authority',
                        isActive_li: false
                    }]
                }, {
                    icon: 'fa fa-users',
                    itemname: '团队管理',
                    lists: [{
                        listname: '团队列表',
                        url: '/team',
                        isActive_li: false
                    }]
                }, {
                    icon: 'fa fa-users',
                    itemname: '项目管理',
                    lists: [{
                        listname: '项目管理',
                        url: '/projects',
                        isActive_li: false
                    }]
                }, {
                    icon: 'fa fa-users',
                    itemname: '运输管理',
                    lists: [{
                        listname: '路线规划',
                        url: '/routeplan',
                        isActive_li: false
                    }]
                }],

            }
        },
        methods: {
            // changeActive: function() {
            //     this.isActive = !this.isActive
            //     console.log(this.isActive)
            // },
            clickToActive(e, list) {
                for (var i = 0; i < this.items.length; i++) {
                    for (var j = 0; j < this.items[i].lists.length; j++) {
                        this.items[i].lists[j].isActive_li = false
                    }
                }
                list.isActive_li = true
            },
            linkto: function(link) {
                this.$router.replace(link);
            },
            getNav() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:5000/nav/get',
                    data: {},
                    dataType: 'json',
                    async: false,
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {

                        var item = {}
                        item.icon = 'fa fa-file-text-o'
                        item.itemname = '系统操作说明'
                        var lists = []
                        for (var i = 0; i < retdata.data.length; i++) {
                            var list = {}
                            list.listname = retdata.data[i].subDirname
                            list.url = '/document/' + retdata.data[i].subDirname
                            list.isActive_li = false
                            lists.push(list)
                        }
                        item.lists = lists
                        _this.items.push(item)
                    }
                });
            }

        },
        mounted() {
            this.getNav()
        }
    }
</script>
<style>
    .active_li {
        color: #fff;
    }
    
    div.sidebar-nav {
        height: 100%;
    }
    
    .sidebar-nav a {
        cursor: pointer
    }
</style>